<template>
  <div class="index">
    <app-header></app-header>
    <app-navbar></app-navbar>
    <app-main></app-main>
  </div>
</template>

<script>
  import AppHeader from "../components/header.vue"
  import AppNavbar from "../components/nav_1.vue"
  import AppMain from "../components/main.vue"

  // 导入子组件，缩写格式 AppHeader: AppHeader
  export default {
    name:"Index",
    components: { AppHeader, AppNavbar, AppMain }  // 有s
  };

</script>

<style scoped>
  .index{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #e9e9e9;
    /* 当内容过多时y轴出现滚动条 */
    overflow-y: auto;
    min-width: 100%;
    overflow-x: auto;
  }

  /* 左侧样式 */
  .navbar {
    position: absolute;
    max-width: 220px;
    min-width: 220px;
    top: 0px;  /* 距离上面50像素 */
    left: 0px;
    bottom: 0px;
    text-align: left;
    overflow-y: auto;
    background-color: #2d3a4b;
    
  }

  /* 主区域 */
  .appmain {
    position: absolute;
    float: right;
    margin: 5px;
    top: 60px;
    left: 220px;
    bottom: 0px;
    right: 0px;  /* 距离右边10像素 */
    padding: 10px;
    overflow-y: auto; /* 当内容过多时y轴出现滚动条 */
    background-color: #fff;
    z-index: 99999;
  }
</style>